<template>
  <body>
    <div id="register">
      <div class="native">
        <div class="title">
          <img src="../../assets/Logo.jpeg" alt="logo" />
          <h2>四川省志愿填报系统</h2>
        </div>
        <div class="exit">
          <router-link href="#" to="/homePage">返回首页</router-link>
        </div>
      </div>
      <div class="registerArea">
        <div class="header">
          <el-divider content-position="center">用户注册</el-divider>
        </div>
        <div class="inputArea">
          <el-form
            :model="ruleForm"
            status-icon
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="用户名" prop="username">
              <el-input
                type="text"
                v-model="ruleForm.username"
                autocomplete="off"
                placeholder="请输入用户名"
                @input="usernameInputChange"
                maxlength="16"
              ></el-input>
              <span v-show="isRight === 0" style="color: #f70404">{{
                message
              }}</span>
              <span v-show="isRight === 1" style="color: #22b865">{{
                message
              }}</span>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input
                type="password"
                v-model="ruleForm.password"
                autocomplete="off"
                placeholder="请输入密码"
                @input="passwordInputChange"
                maxlength="16"
              ></el-input>
              <span v-show="passIsRight === 0" style="color: #f70404">{{
                passMsg
              }}</span>
              <span v-show="passIsRight === 1" style="color: #22b865">{{
                passMsg
              }}</span>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPass">
              <el-input
                type="password"
                v-model="ruleForm.checkPass"
                autocomplete="off"
                placeholder="请输入确认密码"
                @input="checkPassInput"
                maxlength="16"
              ></el-input>
              <span v-show="checkPassIsRight === 0" style="color: #f70404">{{
                checkPassMsg
              }}</span>
              <span v-show="checkPassIsRight === 1" style="color: #22b865">{{
                checkPassMsg
              }}</span>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input
                type="text"
                v-model="ruleForm.email"
                autocomplete="off"
                placeholder="请输入邮箱"
                @input="emailInputChange"
              ></el-input>
              <span v-show="emailIsRight === 0" style="color: #f70404">{{
                emailMsg
              }}</span>
              <span v-show="emailIsRight === 1" style="color: #22b865">{{
                emailMsg
              }}</span>
            </el-form-item>
            <el-form-item label="验证码" prop="code">
              <el-input
                class="yanzheng"
                type="text"
                v-model="ruleForm.code"
                autocomplete="off"
                placeholder="请输入验证码"
                @input="codeInputChange"
                maxlength="6"
              ></el-input>

              <button @click="getEmailCode()" class="code-btn getYZ">
                <span v-show="show">立即获取</span>
                <span v-show="!show" class="count">{{ count }} s后重发</span>
              </button>
              <span v-show="codeIsRight === 0" style="color: #f70404">{{
                codeMsg
              }}</span>
              <span v-show="codeIsRight === 1" style="color: #22b865">{{
                codeMsg
              }}</span>
              <span class="status">{{ statusMsg }}</span>
            </el-form-item>
          </el-form>
        </div>
        <button class="registerBtn" @click="register()">立即注册</button>
        <div class="others">
          <span>
            已有账号，
            <router-link href="#" to="/login">马上登录></router-link>
          </span>
        </div>
      </div>
    </div>
  </body>
</template>

<script>
const TIME_COUNT = 120; // 设置一个全局的倒计时的时间
import qs from "qs";
import Base64 from "base-64";
export default {
  data() {
    return {
      // 验证有效性
      isRight: 0,
      message: "",
      passIsRight: 0,
      passMsg: "",
      checkPassIsRight: 0,
      checkPassMsg: "",
      emailIsRight: 0,
      emailMsg: "",
      codeIsRight: 0,
      codeMsg: "",
      show: true,
      count: "",
      timer: null,
      statusMsg: "",
      ruleForm: {
        username: "",
        password: "",
        checkPass: "",
        email: "",
        code: "",
      },
    };
  },
  methods: {
    // 有效性验证
    usernameInputChange(username) {
      let reg = /^[^_]\S{0,14}[^_]$/;
      console.log(reg.test(username));
      if (username.length === 0) {
        this.isRight = 0;
        this.message = "用户名不可为空!";
      } else if (reg.test(username) && username.length < 2) {
        this.isRight = 0;
        this.message = "用户名需大于2位!";
      } else if (reg.test(username) && username.length > 16) {
        this.isRight = 0;
        this.message = "用户名需小于16位!";
        username = username.slice(0, 16);
      } else if (!reg.test(username)) {
        this.isRight = 0;
        this.message = "用户名不能以下划线开头和结尾!";
      } else {
        this.isRight = 1;
        this.message = "输入格式正确!";
      }
    },
    passwordInputChange(password) {
      let reg = /^(?![A-Z]+$)(?![a-z]+$)(?!\d+$)(?![\W_]+$)\S{6,16}$/;
      // console.log(password);
      if (password.length === 0) {
        this.passIsRight = 0;
        this.passMsg = "密码不可为空!";
      } else if (password.length < 6) {
        this.passIsRight = 0;
        this.passMsg = "密码需大于6位!";
      } else if (password.length > 16) {
        this.passIsRight = 0;
        this.passMsg = "用户名需小于16位!";
        password = password.slice(0, 16);
      } else if (!reg.test(password)) {
        this.passIsRight = 0;
        this.passMsg =
          "密码需包含小写字母、大写字母、数字、特殊符号的两种及以上";
      } else {
        this.passIsRight = 1;
        this.passMsg = "输入格式正确!";
      }
    },
    checkPassInput(check) {
      if (check !== this.ruleForm.password) {
        this.checkPassIsRight = 0;
        this.checkPassMsg = "两次输入密码不一致!";
      } else {
        this.checkPassIsRight = 1;
        this.checkPassMsg = "两次输入密码一致!";
      }
    },
    emailInputChange(email) {
      let reg = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
      if (email.length === 0) {
        this.emailIsRight = 0;
        this.emailMsg = "邮箱不可为空!";
      } else if (!reg.test(email)) {
        this.emailIsRight = 0;
        this.emailMsg = "邮箱格式错误！";
      } else {
        this.emailIsRight = 1;
        this.emailMsg = "输入格式正确!";
      }
    },
    codeInputChange(code) {
      let reg = /^[0-9]{6}$/; /*定义验证表达式*/
      if (code.length === 0) {
        this.codeIsRight = 0;
        this.codeMsg = "验证码不可为空!";
      } else if (code.length !== 6) {
        this.codeIsRight = 0;
        this.codeMsg = "验证码必须为6位！";
      } else if (!reg.test(code)) {
        this.codeIsRight = 0;
        this.codeMsg = "验证码只能为数字, 格式错误！";
      } else {
        this.codeIsRight = 1;
        this.codeMsg = "输入格式正确!";
      }
    },
    // 获得验证码
    getEmailCode() {
      var reg =
        /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/; /*定义验证表达式*/
      if (this.ruleForm.email === "") {
        this.$message.error("请输入邮箱");
        return;
      } else if (!reg.test(this.ruleForm.email)) {
        this.$message.error("请注意邮箱格式！");
        return;
      } else {
        this.$axios
          .get("/getCheckCode/" + this.ruleForm.email, {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded",
            },
          })
          .then((res) => {
            console.log(res);
            sessionStorage.setItem("checkcode", res.data.data);
          });
        // 验证码倒计时效果
        if (!this.timer) {
          this.count = TIME_COUNT;
          this.show = false;
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--;
            } else {
              this.show = true;
              clearInterval(this.timer);
              this.timer = null;
            }
          }, 1000);
        }
      }
    },
    // 注册
    register() {
      var _this = this;
      this.$axios
        .post(
          "/register",
          qs.stringify({
            username: this.ruleForm.username,
            password: Base64.encode(this.ruleForm.password),
            email: this.ruleForm.email,
            code: this.ruleForm.code,
          })
        )
        .then((res) => {
          if (res.data.code === 200) {
            this.$message.success("注册成功！");
            this.$router.replace("/login");
          } else {
            this.$message.error("注册失败，请重试!");
          }
        })
        .catch((failresonse) => {});
    },
  },
};
</script>

<style scoped>
body {
  width: 100%;
  height: 100%;
  position: fixed;
  background: url("../../assets/LoginBack.jpg") no-repeat;
  background-position: center;
  background-size: cover;
}

.native {
  width: 100%;
  height: 120px;
  display: flex;
  flex-direction: row;
}

.title {
  position: relative;
  width: 300px;
  height: 100px;
  line-height: 100px;
  margin-top: 30px;
  left: 50%;
  margin-left: -150px;
  text-align: center;
}

.title img {
  float: left;
  width: 40px;
  padding-top: 30px;
}

.title h2 {
  float: left;
  margin-left: 15px;
  height: 100px;
  line-height: 100px;
}

.exit {
  width: 100px;
  position: absolute;
  top: 50px;
  right: 100px;
  font-size: 18px;
  cursor: pointer;
}

.registerArea {
  position: relative;
  width: 660px;
  height: 500px;
  left: 50%;
  margin-left: -330px;
}

.registerArea .header {
  width: 100%;
  height: 50px;
  display: flex;
}

.el-divider__text {
  background-color: transparent;
  font-size: 20px;
  font-weight: bold;
}

.header span {
  height: 50px;
  line-height: 50px;
  text-align: center;
  position: absolute;
  right: 20px;
}

.inputArea {
  position: relative;
  margin: 20px auto;
  width: 600px;
}

.demo-ruleForm {
  position: relative;
  width: 630px;
  left: 50%;
  margin-left: -250px;
}

.el-input {
  width: 300px;
}

.yanzheng {
  width: 200px;
}

.getYZ {
  color: white;
  width: 92px;
  height: 40px;
  background-color: rgba(255, 101, 0);
  border-radius: 5px;
}

.status {
  font-size: 12px;
  color: #e6a23c;
}

.agree {
  margin-top: 5px;
  width: 200px;
  height: 30px;
  margin-left: 145px;
  margin-bottom: 10px;
}

.registerBtn {
  position: relative;
  color: white;
  width: 340px;
  height: 35px;
  background-color: rgba(255, 101, 0);
  left: 50%;
  margin-left: -183px;
}

.others {
  position: absolute;
  width: 200px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  right: 160px;
  font-size: 12px;
}
</style>